<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托</title>
    <link rel="stylesheet" href="src/assets/reset.min.css">
    <style>
        html,
        body {
            height: 100%;
            overflow: hidden;
        }

        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #root {
            width: 300px;
            height: 300px;
            background: lightblue;
        }

        #outer {
            width: 200px;
            height: 200px;
            background: lightgreen;
        }

        #inner {
            width: 100px;
            height: 100px;
            background: lightcoral;
        }
    </style>
</head>

<body>
    <div id="root" class="center">
        <div id="outer" class="center">
            <div id="inner" class="center"></div>
        </div>
    </div>

    <!-- IMPORT JS -->
    <script>
        /* const html = document.documentElement,
            body = document.body,
            root = document.querySelector('#root'),
            outer = document.querySelector('#outer'),
            inner = document.querySelector('#inner')

        window.addEventListener('click', function () { console.log('window 捕获') }, true)
        window.addEventListener('click', function () { console.log('window 冒泡') }, false)

        document.addEventListener('click', function (ev) {
            console.log('document 捕获')
            // stopPropagation：阻止事件的传播「包括所有阶段」
            // ev.stopPropagation()
        }, true)
        document.addEventListener('click', function () { console.log('document 冒泡') }, false)

        html.addEventListener('click', function () { console.log('html 捕获') }, true)
        html.addEventListener('click', function () { console.log('html 冒泡') }, false)

        body.addEventListener('click', function () { console.log('body 捕获') }, true)
        body.addEventListener('click', function () { console.log('body 冒泡') }, false)

        root.addEventListener('click', function () { console.log('root 捕获') }, true)
        root.addEventListener('click', function () { console.log('root 冒泡') }, false)

        outer.addEventListener('click', function () { console.log('outer 捕获') }, true)
        outer.addEventListener('click', function () { console.log('outer 冒泡') }, false)

        inner.addEventListener('click', function () { console.log('inner 捕获') }, true)
        inner.addEventListener('click', function (ev) {
            console.log('inner 冒泡1')
            // stopPropagation：只会阻止下一步的处理，但是对于当前这一步绑定的多个方法依然都会被触发执行
            // stopImmediatePropagation：不仅会阻止下一步的处理，对于当前这一步绑定的其它方法，如果还没有执行，也不会再执行了！
            ev.stopImmediatePropagation()
        }, false)
        inner.addEventListener('click', function () {
            console.log('inner 冒泡2')
        }, false) */
    </script>

    <script>
        // 点击body中的任意元素，都会触发body的点击事件
        document.body.addEventListener('click', function (ev) {
            let target = ev.target,
                targetTag = target.tagName,
                targetId = target.id
            if (targetTag === 'BODY') {
                console.log('我是BODY')
                return
            }
            if (targetId === 'root') {
                console.log('我是ROOT')
                return
            }
            if (targetId === 'outer') {
                console.log('我是OUTER')
                return
            }
            console.log('点击的是寂寞')
        }, false)

        // 如果其中某个元素点击的时候，要干的事情比较复杂，不想和事件委托的代码混在一起，我们可以单独为这个元素做事件绑定
        document.querySelector('#inner').addEventListener('click', function (ev) {
            console.log('我是INNER，我最酷！')
            ev.stopPropagation()
        }, false)
    </script>
</body>

</html>